<template>
    <div class="bg">
        <div class="demo-tabs">
            <div style="text-align: center;">
                <h2>基础框架</h2>
            </div>
            <el-tabs v-model="activeName" class="">
                <el-tab-pane label="账号密码登录" name="first">
                    <passwordForm />
                </el-tab-pane>
                <el-tab-pane label="手机号登录" name="second">
                    <phoneForm />
                </el-tab-pane>
            </el-tabs>
            <div style="text-align: center;">
                <el-button type="success">微信登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import passwordForm from './passwordForm.vue'
import phoneForm from './phoneForm.vue'
const activeName = ref('first')

</script>

<style  scoped>
.bg {
    background: url('http://demo.open.xuexiluxian.cn/assets/login_bg.1131b254.webp');
    background-size: cover;
    width: 100vm;
    height: 100vh;
    overflow: hidden;
}

.demo-tabs {
    background-color: #fff;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    padding: 30px;
}
</style>